import React, { useEffect, useState } from 'react'
import { Button, Space, Table, } from 'antd';
import type { TableProps } from 'antd';
import http from '../../utils/http'


interface DataType {
  createdAt: string;
  updatedAt: string;
  id: number;
  title: string;
  content: string[];
}


interface paramsPage {
  page:number;
  pageSize:number;
}

const Home = () => {
const columns: TableProps<DataType>['columns'] = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '内容',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '时间',
    dataIndex: 'createdAt',
    key: 'createdAt',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button>编辑</Button>
        <Button>删除</Button>
      </Space>
    ),
  },
];

const [artiList,setArtiList]=useState<DataType[]>([])
const [total,setTotal]=useState(0)
const [queryPage,setQueryPage]=useState<paramsPage>({
    page:1,
    pageSize:10
})

// 请求列表接口
const getData=async(queryPage:paramsPage)=>{
 const res=await http.get("/api/article/list",{params:queryPage})
 const {count,rows}=res.data
 setTotal(count)
 setArtiList(rows)
}

useEffect(()=>{
 getData(queryPage)
},[])


// 分页
const hePage=async(page:number,pageSize:number)=>{
   setQueryPage({
     ...queryPage,
     page:page,
     pageSize:pageSize,
   })
   getData(queryPage)
}
  return (
    <div>
      <Table<DataType>
       columns={columns}
       dataSource={artiList}
       pagination={{
         total:total,
         showSizeChanger:true,
         showQuickJumper:true,
         showTotal:(total) => `Total ${total} items`,
         onChange:hePage
       }}
      />
    </div>
  )
}

export default Home
